/*
 * @Author: Wilbur
 * @Date: 2018-11-17 16:39:20
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-12-08 16:20:32
 */
<template>
    <div class="container user-list-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="handleRoute('AddClass')"
                size="small">新增班级</el-button>
            <a :href="exportLink">
                <el-button
                    type="default"
                    :disabled="!exportLink"
                    size="small">导出数据</el-button>
            </a>
        </div>

        <!-- 统计 -->
        <div class="stat-wrapper">
            <div class="desc">
                <p class="end-time">新增班级数量</p>
                <div
                    @click="fnGetTotalCount"
                    class="total-switch">
                    <span>查看新增班级统计数据</span>
                    <i :class="showTotalCountFlag ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/>
                </div>
            </div>
            <div
                class="stat"
                v-if="showTotalCountFlag">
                <div
                    class="stat-item"
                    v-for="(item, index) in classTotalCount"
                    :key="index">
                    <p class="title">新增:{{ item.new_enable_count }}</p>
                    <p class="num">{{ item.day_time * 1000 | dateFormatter('yyyy/MM/dd') }}</p>
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择城市：">
                            <el-select
                                v-model="filterData.city_id"
                                filterable
                                @change="fnCityChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.city_id"
                                    :label="item.name"
                                    :value="item.city_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择学校：">
                            <el-select
                                v-model="filterData.school_id"
                                filterable
                                @change="fnSchoolChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in schoolList"
                                    :key="item.school_id"
                                    :label="item.name"
                                    :value="item.school_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择学院：">
                            <el-select
                                v-model="filterData.academy_no"
                                filterable
                                @change="fnAcademyChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in academyList"
                                    :key="item.academy_no"
                                    :label="item.name"
                                    :value="item.academy_no"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择年级：">
                            <el-select
                                v-model="filterData.grade"
                                filterable
                                @change="fnGradeChange"
                                placeholder="请选择年级">
                                <el-option
                                    v-for="item in gradeList"
                                    :key="item.grade"
                                    :label="item.label"
                                    :value="item.grade" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="班级状态：">
                            <el-select
                                v-model="filterData.enable_status"
                                filterable
                                @change="getTableData(1)"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in classStatusList"
                                    :key="item.status"
                                    :label="item.label"
                                    :value="item.status" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 8 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="其他：">
                            <el-input
                                v-model="filterData.search_content"
                                placeholder="请输入手机号或者班级名称或者邀请码" />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="search-btn-wrapper"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            type="primary"
                            @click="fnSearch">搜索</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        type="selection"/>
                    <el-table-column
                        fixed="left"
                        align="center"
                        width="150"
                        show-overflow-tooltip
                        prop="school_name"
                        label="学校"/>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="academy_name"
                        align="center"
                        show-overflow-tooltip
                        label="学院" />
                    <el-table-column
                        :formatter="gradeFormatter"
                        align="center"
                        prop="grade"
                        label="年级" />
                    <el-table-column
                        align="center"
                        prop="name"
                        label="班级名称" />
                    <el-table-column
                        align="center"
                        prop="invite_code"
                        label="班级邀请码"/>
                    <el-table-column
                        align="center"
                        label="班级入驻人数/班级人数">
                        <template slot-scope="scope">
                            {{ scope.row.now_student_count }}/{{ scope.row.student_count }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="monitor.nickname"
                        align="center"
                        label="班长微信昵称" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="monitor.phone"
                        align="center"
                        label="班长手机号" />
                    <el-table-column
                        align="center"
                        label="班级激活链接">
                        <template slot-scope="scope">
                            <a
                                href="javascript:;"
                                class="copy-btn"
                                @click="handleInitCopy(scope.row.enable_class_url)">复制链接</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="money"
                        align="center"
                        label="班级状态">
                        <template slot-scope="scope">
                            <template v-if="scope.row.enable == 1">
                                <span class="class-status completed">已激活</span>
                            </template>
                            <template v-else>
                                <span class="class-status wait-audit">未激活</span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        width="150">
                        <template slot-scope="scope">
                            <div class="class-operate">
                                <el-button
                                    type="text"
                                    @click="fnChangeMoniter(scope.row.class_no)">更换班长</el-button>
                                <el-button
                                    type="text"
                                    @click="fnEditInfo(scope.row.class_no, scope.row.name, scope.row.grade, scope.row.grade_type, scope.row.max_grade, scope.row.student_count, scope.row.invite_code)">修改资料</el-button>
                                <el-button
                                    type="text"
                                    @click="fnSetClassStatus(scope.row.class_no, scope.row.status)">
                                    <template v-if="scope.row.status == 1">禁用班级</template>
                                    <template v-else><span style="color: #E6A23C;">启用班级</span></template>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
        <!-- 更换班长弹窗 -->
        <el-dialog
            title="更换班长"
            width="30%"
            :visible.sync="showChangeMonitorFlag">
            <p class="change-desc">选择更换班长的手机号</p>
            <el-select
                v-model="leader_no"
                filterable
                class="change-select"
                placeholder="请选择">
                <el-option
                    v-for="item in studentList"
                    :key="item.user_no"
                    :label="item.phone"
                    :value="item.user_no"/>
            </el-select>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="fnCancelChange">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnConfirmChange">确定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑班级资料弹窗 -->
        <el-dialog
            custom-class="edit-class-info"
            title="修改资料"
            :visible.sync="showEditClassInfoFlag"
            width="30%"
            center>
            <div>
                <el-form
                    :model="classInfo"
                    :rules="rules"
                    ref="classInfo"
                    label-width="90px"
                    class="demo-classInfo">
                    <el-form-item
                        label="班级名称"
                        prop="name">
                        <el-input v-model="classInfo.name"/>
                    </el-form-item>
                    <el-form-item
                        label="班级年级"
                        prop="grade">
                        <el-select
                            v-model="classInfo.grade"
                            placeholder="请选择年级">
                            <el-option
                                v-for="item in gradeList1"
                                :key="item.grade"
                                :label="item.label"
                                :value="item.grade"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="班级年限"
                        prop="max_grade">
                        <el-select
                            v-model="classInfo.max_grade"
                            placeholder="请选择班级年限">
                            <el-option
                                label="3"
                                value="3"/>
                            <el-option
                                label="4"
                                value="4"/>
                            <el-option
                                label="5"
                                value="5"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="班级人数"
                        prop="student_count">
                        <el-input
                            v-model="classInfo.student_count"
                            type="number"/>
                    </el-form-item>
                    <el-form-item
                        label="班级邀请码"
                        type="number"
                        prop="invite_code">
                        <el-input v-model="classInfo.invite_code"/>
                    </el-form-item>
                </el-form>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button @click="resetForm('classInfo')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('classInfo')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
    data() {
        return {
            classTotalCount: [],
            showTotalCountFlag: false,
            class_no: '',
            copyLink: '',
            classInfo: {
                class_no: '',
                name: '',
                grade: '',
                max_grade:'',
                student_count: '',
                invite_code: '',
                grade_type: '',
                grade_commit: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入班级名称', trigger: 'blur' }
                ],
                grade: [
                    { required: true, message: '请选择年级', trigger: 'change' }
                ],
                max_grade: [
                    { required: true, message: '请选择班级年限', trigger: 'change' }
                ],
                student_count: [
                    { required: true, message: '请输入班级人数', trigger: 'blur' }
                ],
                invite_code: [
                    { required: true, message: '请填写邀请码', trigger: 'blur' },
                    { min: 6, max: 6, message: '邀请码为6位数的数字', trigger: 'blur' }
                ]
            },
            showEditClassInfoFlag: false,
            filterData: {
                city_id: '',
                school_id: '',
                academy_no: '',
                grade: '',
                search_content: '',
                enable_status: '',
                grade_commit: '',
                grade_type: ''
            },
            academy_name: '',
            cityList:[],
            schoolList: [{
                school_id: '',
                name: '全部'
            }],
            classStatusList: [{
                status: '',
                label: '全部'
            },{
                status: 1,
                label: '未激活'
            },{
                status: 2,
                label: '已激活'
            }],
            academyList: [{
                academy_no: '',
                name: '全部'
            }],
            gradeList:[{
                grade: '',
                label: '全部'
            },{
                grade: 1,
                label: '大一'
            },{
                grade: 2,
                label: '大二'
            },{
                grade: 3,
                label: '大三'
            },{
                grade: 4,
                label: '大四'
            },{
                grade: 5,
                label: '大五'
            },{
                grade: -6,
                label: '研一'
            },{
                grade: -7,
                label: '研二'
            },{
                grade: -8,
                label: '研三'
            },{
                grade: -1,
                label: '已毕业'
            }],
            gradeList1:[{
                grade: 1,
                label: '大一'
            },{
                grade: 2,
                label: '大二'
            },{
                grade: 3,
                label: '大三'
            },{
                grade: 4,
                label: '大四'
            },{
                grade: 5,
                label: '大五'
            },{
                grade: -6,
                label: '研一'
            },{
                grade: -7,
                label: '研二'
            },{
                grade: -8,
                label: '研三'
            }],
            showChangeMonitorFlag: false,
            leader_no: '',
            studentList: [],
            authResult: {},
            tasks: [],
            tableData: [],
            sortData: {
                field: '',
                by: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            transformIds: []
        };
    },
    computed: {
        exportLink() {
            let { city_id, school_id,academy_no,grade_commit,search_content,grade_type } = this.filterData;
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');

            return `${base}/task/base_class%5Cexport_list?city_id=${city_id}&school_id=${school_id}&academy_no=${academy_no}&grade=${grade_commit}&grade_type=${grade_type}&search_content=${search_content}&__ticket=${ticket}`;
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "任务反馈系统",
            },
            {
                title: "班级管理"
            }
        ]);
        this.getTableData(1);
        this.getCityList();
    },
    mounted() {
    },
    methods: {
        /**
         * 复制链接
         */
        handleInitCopy(link) {
            var clipboard = new Clipboard('.copy-btn', {
                text: function () {
                    return link;
                }
            });

            clipboard.on('success', e => {
                this.$message({
                    type: 'success',
                    message: '复制成功'
                });
                e.clearSelection();
            });

            clipboard.on('error', e => {
                this.$message({
                    type: 'warning',
                    message: '未复制成功，请手动复制'
                });
            });
        },
        /**
         * 提交班级资料
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let gd = this.classInfo.grade;

                    if(gd == 1 || gd == 2 || gd == 3 || gd == 4 || gd == 5) {
                        this.classInfo.grade_type = 1;
                        this.classInfo.grade_commit = gd;
                    }else if(gd == -6 || gd == -7 || gd == -8) {
                        this.classInfo.grade_type = 2;
                        this.classInfo.grade_commit = Math.abs(gd) - 5;
                    }else if(gd == -1){
                        this.classInfo.grade_type = '';
                        this.classInfo.grade_commit = -1;
                    }else{
                        this.classInfo.grade_type = '';
                        this.classInfo.grade_commit = '';
                    }

                    this.$post('/task/base_class%5Cedit', {
                        class_no: this.classInfo.class_no,
                        grade: this.classInfo.grade_commit,
                        grade_type: this.classInfo.grade_type,
                        invite_code: this.classInfo.invite_code,
                        max_grade: this.classInfo.max_grade,
                        name: this.classInfo.name,
                        student_count: this.classInfo.student_count,
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.getTableData(this.page.now_page);
                            this.$refs[formName].resetFields();
                            this.showEditClassInfoFlag = false;
                        }else{
                            this.$message({
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.showEditClassInfoFlag = false;
            this.$refs[formName].resetFields();
        },
        /**
         * 编辑班级资料
         */
        fnEditInfo(class_no, name, grade,grade_type, max_grade, student_count, invite_code) {
            this.showEditClassInfoFlag = true;
            this.classInfo.class_no = class_no;
            this.classInfo.name = name;
            this.classInfo.grade_type = grade_type;
            if(grade_type == 1) {
                this.classInfo.grade = grade;
            }else if(grade_type == 2){
                this.classInfo.grade = (0 - grade) - 5;
                console.log(this.classInfo.grade, this.classInfo);
            }
            this.classInfo.max_grade = max_grade;
            this.classInfo.student_count = student_count;
            this.classInfo.invite_code = invite_code;
        },
        /**
         * 搜索
         */
        fnSearch() {
            this.getTableData(1);
        },
        /**
         * 更改城市
         */
        fnCityChange() {
            this.filterData.school_id = '';
            this.filterData.academy_no = '';
            this.getSchoolList();
            this.getTableData(1);
        },
        /**
         * 更改学校
         */
        fnSchoolChange() {

            // for(let i = 0; i < this.schoolList.length; i++) {
            //     if(this.school_id == this.schoolList[i].school_id) {
            //         this.school_name = this.schoolList[i].name;
            //     }
            // }
            this.filterData.academy_no = '';
            this.getAcademyList();
            this.getTableData(1);
        },
        /**
         * 更改学院
         */
        fnAcademyChange() {
            // for(let i = 0; i < this.academyList.length; i++) {
            //     if(this.academy_no == this.academyList[i].academy_no) {
            //         this.academy_name = this.academyList[i].name;
            //     }
            // }
            this.getTableData(1);
        },
        /**
         * 更改年级
         */
        fnGradeChange() {
            let gd = this.filterData.grade;

            if(gd == 1 || gd == 2 || gd == 3 || gd == 4 || gd == 5) {
                this.filterData.grade_type = 1;
                this.filterData.grade_commit = gd;
            }else if(gd == -6 || gd == -7 || gd == -8) {
                this.filterData.grade_type = 2;
                this.filterData.grade_commit = Math.abs(gd) - 5;
            }else if(gd == -1){
                this.filterData.grade_type = '';
                this.filterData.grade_commit = -1;
            }else{
                this.filterData.grade_type = '';
                this.filterData.grade_commit = '';
            }

            this.getTableData(1);

        },
        /**
         * 获取城市列表
         */
        getCityList() {
            this.$post('/task/base_city%5Cget_simple_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.cityList = resp.data.list;
                    this.cityList.unshift({
                        city_id: '',
                        name: '全部'
                    });
                }
            });
        },
        /**
         * 获取学校列表
         */
        getSchoolList() {
            this.$post('/task/base_school%5Cget_simple_list', {
                city_id: this.filterData.city_id
            }, resp => {
                if (resp.code == 1) {
                    this.schoolList = resp.data.list;
                    this.schoolList.unshift({
                        school_id: '',
                        name: '全部'
                    });
                }
            });
        },
        /**
         * 获取学院列表
         */
        getAcademyList() {
            this.$post('/task/base_academy%5Cget_simple_list', {
                school_id: this.filterData.school_id
            }, resp => {
                if (resp.code == 1) {
                    this.academyList = resp.data.list;
                    this.academyList.unshift({
                        academy_no: '',
                        name: '全部'
                    });
                }
            });
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {

            this.$post('/task/base_class%5Cget_list', {
                page_id: page || this.page.now_page,
                city_id: this.filterData.city_id,
                school_id: this.filterData.school_id,
                academy_no: this.filterData.academy_no,
                grade: this.filterData.grade_commit,
                grade_type: this.filterData.grade_type,
                search_content: this.filterData.search_content,
                enable_status: this.filterData.enable_status
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },
        /**
         * 获取统计数据
         */
        fnGetTotalCount() {
            this.showTotalCountFlag = !this.showTotalCountFlag;
            if(this.classTotalCount.length > 0) {
                return;
            }
            this.$post('/task/statistic%5Cclass_enable', {}, resp => {
                if (resp.code == 1) {
                    this.classTotalCount = resp.data;
                }
            });
        },
        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        gradeFormatter(row, column, val) {

            // 大学生
            if(row.grade_type == '1') {
                if(val == '1') {
                    return '大一';
                }else if(val == '2') {
                    return '大二';
                }else if(val == '3') {
                    return '大三';
                }else if(val == '4') {
                    return '大四';
                }else if(val == '5') {
                    return '大五';
                }else if(val == '0') {
                    return '已毕业';
                }else if(val == '-2') {
                    return '--';
                }else{
                    return val;
                }
            }else if(row.grade_type == '2') { //研究生
                if(val == '1') {
                    return '研一';
                }else if(val == '2') {
                    return '研二';
                }else if(val == '3') {
                    return '研三';
                }else if(val == '-2') {
                    return '--';
                }else{
                    return val;
                }
            }else{
                return '--';
            }
        },
        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },
        /**
         * 更换班长
         */
        fnChangeMoniter(class_no) {
            this.showChangeMonitorFlag = true;
            this.class_no = class_no;
            this.fnGetClassMemebers(class_no);
        },
        /**
         * 获取班级成员列表
         */
        fnGetClassMemebers(class_no) {
            this.$post('/task/base_class%5Cget_student_simple_list', {
                class_no: class_no
            }, resp => {
                if (resp.code == 1) {
                    // this.studentList = resp.data.list;
                    let temp = resp.data.list;
                    let list = [];

                    for(let i = 0; i < temp.length; i++) {
                        if(temp[i].phone != '') {
                            list.push(temp[i]);
                        }
                    }
                    this.studentList = list;
                }
            });
        },
        /**
         * 确认更换班长
         */
        fnConfirmChange() {
            this.$post('/task/base_class%5Cset_monitor', {
                class_no: this.class_no,
                user_no: this.leader_no
            }, resp => {
                if(resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.showChangeMonitorFlag = false;
                    this.getTableData(this.page.now_page);
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }

            });

        },
        /**
         * 取消更换班长
         */
        fnCancelChange() {
            this.showChangeMonitorFlag = false;
        },
        /**
         * 设置班级状态
         */
        fnSetClassStatus(class_no, status) {
            this.$confirm('确定禁用/启用该班级吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.$post('/task/base_class%5Cset_status', {
                    class_no: class_no,
                    status: status == 0 ? 1 : 0
                }, resp => {
                    if (resp.code == 1) {
                        for(let i = 0; i < this.tableData.length; i++) {
                            if(class_no == this.tableData[i].class_no) {
                                this.tableData[i].status = (status == 0 ? 1 : 0);
                            }
                        }
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }
                });
            }).catch(() => {
                console.log('cancel');
            });
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.stat-wrapper {
    margin-top: 15px;
    .desc {
        color: #262626;
        background: #fff;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        // border-bottom: 1px solid #c0c4cc;
        padding-right: 30px;
        .end-time{
            position: relative;
            display: inline-block;
            padding-right: 15px;
            font-weight: bold;
            &:after{
                position: absolute;
                content: '';
                width:1px;
                height:20px;
                background:rgba(240,242,245,1);
                right: 0px;
                top: 50%;
                margin-top: -10px;
            }
        }
        .total-switch{
            position: relative;
            display: inline-block;
            font-size:14px;
            font-weight:400;
            color:rgba(38,38,38,1);
            line-height:20px;
            padding-left: 15px;
            cursor: pointer;
        }
    }
    .alert-search-task {
        background-color: #fdf6ec;
        color: #e6a23c;
        border: 1px solid #FAECD8;
        border-radius: 0;
    }
    .stat {
        display: flex;
        justify-content: space-between;
    }
    .stat-title{
        background-color: #fff;
        box-shadow:0px 2px 4px 0px rgba(0,0,0,0.04);
        border: 1px solid #F0F2F5;
        padding: 10px;
        .title {
            position: relative;
            margin-bottom: 5px;
         }
        .num {
            font-size: 12px;
            color: rgba(0, 0, 0, .45);
         }
    }
    .stat-item {
        flex: 1;
        background-color: #fff;
        box-shadow:0px 2px 4px 0px rgba(0,0,0,0.04);
        border: 1px solid #F0F2F5;
        text-align: center;
        padding: 10px;
        &:nth-of-type(n - 1){
            border-left: none;
        }
        &:last-child{
            border-right: none;
        }
        .title {
            position: relative;
            margin-bottom: 5px;
            &::before {
                position: absolute;
                content: '';
                width: 2px;
                height: 15px;
                left: 20px;
                top: calc(50% - 1px);
                transform: translate(0, -50%);
            }

            &.blue {
                &:before {
                    background-color: #007AFF;
                }
            }

            &.green {
                &:before {
                    background-color: #00C800;
                }
            }

            &.orange {
                &:before {
                    background-color: #F5A623;
                }
            }

            &.red {
                &:before {
                    background-color: #FF0019;
                }
            }
        }
        .num {
            font-size: 12px;
            color: rgba(0, 0, 0, .45);
            &.empty {
                font-size: 12px;
                color: rgba(0, 0, 0, .45);
            }
        }
        .el-icon-question{
            color: #ccc;
        }
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
    .class-operate{
        .el-button+.el-button{
            margin-left: 0;
        }
    }
    .copy-btn{
        color: #409EFF;
    }
}
.class-status {
    position: relative;
    display: inline-block;
    padding-left: 9px;
    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        width: 3px;
        height: 3px;
        border-radius: 50%;
    }
    &.wait-submit,
    &.wait-audit {
        &::before {
            background-color: #F5A623;
        }
    }
    &.deny {
        &::before {
            background-color: #FF0019;
        }
    }
    &.completed {
        &::before {
            background-color: #00C800;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.change-desc{
    font-size:14px;
    color:rgba(0,0,0,0.85);
    margin-bottom: 15px;
}
.change-select{
    width: 100%;
}
</style>
<style lang="less">
.edit-class-info{
    width: 455px!important;
    .el-input__inner{
        height: 32px;
        line-height: 32px;
        width: 285px;
    }
}
</style>
